display:none与visibility:hidden在CSS中都是用来控制元素的可见性，但它们之间存在显著的差异。以下是对这两者的详细比较：

一、作用与效果

1. display:none

   • 作用：将元素从文档流中完全移除，使其在页面上不显示且不占据任何位置。
   • 效果：元素的width、height等属性为0，浏览器不会解析该元素，它也不会影响页面的其他布局。

2. visibility:hidden

   • 作用：隐藏元素，使其在视觉上不可见，但仍然占据页面上的空间。
   • 效果：元素虽然不可见，但保留其原本的位置和尺寸，width、height属性不为0，浏览器会解析该元素，它仍然会影响页面的布局。

二、事件监听与交互

1. display:none

   • 无法获取焦点，无法响应任何事件（无论是捕获、命中目标和冒泡阶段均不可以）。由于display:none的元素不会在界面上渲染，因此无法通过鼠标点击命中，元素也无法获取焦点，不能成为键盘事件的命中目标。同时，如果父元素的display为none，子元素也无法响应事件。

2. visibility:hidden

   • 无法获得焦点，但可以在冒泡阶段响应事件。由于设置为visibility:hidden的元素其子元素可以为visibility:visible，因此隐藏的元素有可能位于事件冒泡的路径上。

三、性能与回流

1. display:none

   • 切换显示时，页面会产生回流。回流是指当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等时，页面会重新构建。

2. visibility:hidden

   • 切换显示时，不会引起回流。这意味着使用visibility:hidden在性能上可能更优，尤其是在频繁切换元素显示状态时。

四、使用场景

1. display:none

   • 适用于需要从文档流中完全移除元素，且不希望其占据任何空间的场景。

2. visibility:hidden

   • 适用于需要临时隐藏元素，但仍希望其保留位置和尺寸，以不影响页面布局的场景。例如，在加载过程中隐藏部分内容，或者在用户操作之前暂时隐藏某些提示信息。

综上所述，display:none与visibility:hidden在作用、效果、事件监听与交互、性能与回流以及使用场景等方面都存在显著差异。选择使用哪个属性取决于具体的需求和场景。